import anime, { AnimeAnimParams } from "animejs";
import { CSSProperties } from "vue";

export default {
  animation(el: Element) {
    const lines = el.querySelectorAll<HTMLElement>("g[line] path");
    const cubes = el.querySelectorAll<HTMLElement>("g[cube]");
    interface Mode {
      targets: NodeListOf<HTMLElement>;
      options: AnimeAnimParams;
      initStyle?: CSSProperties;
    }
    const modes: Mode[] = [
      {
        targets: cubes,
        options: {
          keyframes: [{ scale: 1 }, { scale: 1 }],
          rotate: 0,
        },
        initStyle: {
          transform: `rotate(-40deg) scale(0)`,
        },
      },
      {
        targets: lines,
        options: {
          strokeDashoffset: [anime.setDashoffset, 0],
          duration: 500,
          delay: (el, i) => i * 250,
        },
      },
    ];

    const initial = lines.length + cubes.length;
    const timeline = anime.timeline({
      duration: 1000,
      easing: "cubicBezier(0,0,.54,.99)",
    });
    for (let i = initial; i > 0; i--) {
      const index = Math.ceil(i / 2) - 1;
      const mode = modes[i % 2];
      const targets = mode.targets[index];
      Object.assign(targets.style, mode.initStyle);
      timeline.add(
        {
          ...mode.options,
          targets,
        },
        "-=300"
      );
    }
  },
  svg: `
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 600 600"
    width="600"
    height="600"
    preserveAspectRatio="xMidYMid meet"
    style="width: 100%; height: 100%; content-visibility: visible"
  >
    <defs>
      <clipPath id="__lottie_element_2">
        <rect width="600" height="600" x="0" y="0"></rect>
      </clipPath>
    </defs>
    <g clip-path="url(#__lottie_element_2)">
      <g transform="matrix(1,0,0,1,300,300)" line>
        <g transform="matrix(1,0,0,1,0,0)">
          <path
            stroke-linecap="butt"
            stroke-linejoin="miter"
            fill-opacity="0"
            stroke-miterlimit="4"
            stroke="rgb(240,89,33)"
            stroke-opacity="1"
            stroke-width="3"
            d=" M192,80 C192,80 253.10899353027344,45.611000061035156 275,68 C297,90.5 283,138 234,249"
          ></path>
        </g>
      </g>
      <g transform="matrix(1,0,0,1,300,300)" line>
        <g transform="matrix(1,0,0,1,0,0)">
          <path
            stroke-linecap="butt"
            stroke-linejoin="miter"
            fill-opacity="0"
            stroke-miterlimit="4"
            stroke="rgb(240,89,33)"
            stroke-opacity="1"
            stroke-width="3"
            d=" M-170,43 C-170,43 -309.4389953613281,149.66700744628906 -249,189 C-186,230 118.62899780273438,128.46400451660156 127,124"
          ></path>
        </g>
      </g>
      <g transform="matrix(1,0,0,1,300,300)" line>
        <g transform="matrix(1,0,0,1,0,0)">
          <path
            stroke-linecap="butt"
            stroke-linejoin="miter"
            fill-opacity="0"
            stroke-miterlimit="4"
            stroke="rgb(240,89,33)"
            stroke-opacity="1"
            stroke-width="3"
            d=" M152.5,-99.5 C152.5,-99.5 229.88999938964844,-51.9119987487793 180,-12 C130,28 50,44 -84,28"
          ></path>
        </g>
      </g>
      <g transform="matrix(1,0,0,1,300,300)" line>
        <g transform="matrix(1,0,0,1,0,0)">
          <path
            stroke-linecap="butt"
            stroke-linejoin="miter"
            fill-opacity="0"
            stroke-miterlimit="4"
            stroke="rgb(240,89,33)"
            stroke-opacity="1"
            stroke-width="3"
            d=" M-96.5,-216.5 C-96.5,-216.5 -22.75,-211.25 36.25,-176.25"
          ></path>
        </g>
      </g>
      <g line transform="matrix(1,0,0,1,300,300)">
        <g transform="matrix(1,0,0,1,0,0)">
          <path
            stroke-linecap="butt"
            stroke-linejoin="miter"
            fill-opacity="0"
            stroke-miterlimit="4"
            stroke="rgb(240,89,33)"
            stroke-opacity="1"
            stroke-width="3"
            d=" M-216,-127 C-216,-127 -198.67599487304688,-127.16100311279297 -190.5,-158.5 C-187.5,-170 -184.16400146484375,-183.59300231933594 -182.75,-189.25 C-182.25,-191.25 -181.4510040283203,-193.37600708007812 -180.6699981689453,-195.56100463867188 C-178.7969970703125,-200.8000030517578 -176.51300048828125,-207.3990020751953 -168.75,-213.75 C-166.76300048828125,-215.375 -163.375,-217.05999755859375 -159.97999572753906,-217.92300415039062 C-144.57400512695312,-221.83700561523438 -118.96499633789062,-218.86099243164062 -119.375,-220.5"
          ></path>
        </g>
      </g>
        <g
          transform="matrix(0.7071088552474976,0.7071046829223633,-0.7071046829223633,0.7071088552474976,463.1336669921875,312.2289733886719)"
        >
        <g cube style="transform-origin:11% 13%">
          <g
            transform="matrix(1,0,0,1,62.39400100708008,55.74300003051758)"
          >
            <path
              fill="rgb(255,255,255)"
              fill-opacity="1"
              d=" M7.926000118255615,-55.24300003051758 C7.926000118255615,-55.24300003051758 61.611000061035156,-0.7080000042915344 61.611000061035156,-0.7080000042915344 C61.611000061035156,-0.7080000042915344 -8.019000053405762,55.24300003051758 -8.019000053405762,55.24300003051758 C-8.019000053405762,55.24300003051758 -61.611000061035156,0.6129999756813049 -61.611000061035156,0.6129999756813049 C-61.611000061035156,0.6129999756813049 7.926000118255615,-55.24300003051758 7.926000118255615,-55.24300003051758z"
            ></path>
            <path
              stroke-linecap="butt"
              stroke-linejoin="miter"
              fill-opacity="0"
              stroke-miterlimit="4"
              stroke="rgb(241,90,34)"
              stroke-opacity="1"
              stroke-width="0.5"
              d=" M7.926000118255615,-55.24300003051758 C7.926000118255615,-55.24300003051758 61.611000061035156,-0.7080000042915344 61.611000061035156,-0.7080000042915344 C61.611000061035156,-0.7080000042915344 -8.019000053405762,55.24300003051758 -8.019000053405762,55.24300003051758 C-8.019000053405762,55.24300003051758 -61.611000061035156,0.6129999756813049 -61.611000061035156,0.6129999756813049 C-61.611000061035156,0.6129999756813049 7.926000118255615,-55.24300003051758 7.926000118255615,-55.24300003051758z"
            ></path>
          </g>
          <g
            transform="matrix(1,0,0,1,99.85199737548828,105.84300231933594)"
          >
            <path
              fill="rgb(255,255,255)"
              fill-opacity="1"
              d=" M-23.775999069213867,50.7140007019043 C-23.775999069213867,50.7140007019043 -24.24799919128418,50.7140007019043 -24.24799919128418,50.7140007019043 C-24.24799919128418,50.7140007019043 -45.28799819946289,5.142000198364258 -45.28799819946289,5.142000198364258 C-45.28799819946289,5.142000198364258 24.249000549316406,-50.7140007019043 24.249000549316406,-50.7140007019043 C24.249000549316406,-50.7140007019043 45.28799819946289,-5.047999858856201 45.28799819946289,-5.047999858856201 C45.28799819946289,-5.047999858856201 -23.775999069213867,50.7140007019043 -23.775999069213867,50.7140007019043z"
            ></path>
            <path
              stroke-linecap="butt"
              stroke-linejoin="miter"
              fill-opacity="0"
              stroke-miterlimit="4"
              stroke="rgb(241,90,34)"
              stroke-opacity="1"
              stroke-width="0.5"
              d=" M-23.775999069213867,50.7140007019043 C-23.775999069213867,50.7140007019043 -24.24799919128418,50.7140007019043 -24.24799919128418,50.7140007019043 C-24.24799919128418,50.7140007019043 -45.28799819946289,5.142000198364258 -45.28799819946289,5.142000198364258 C-45.28799819946289,5.142000198364258 24.249000549316406,-50.7140007019043 24.249000549316406,-50.7140007019043 C24.249000549316406,-50.7140007019043 45.28799819946289,-5.047999858856201 45.28799819946289,-5.047999858856201 C45.28799819946289,-5.047999858856201 -23.775999069213867,50.7140007019043 -23.775999069213867,50.7140007019043z"
            ></path>
          </g>
          <g
            transform="matrix(1,0,0,1,38.145999908447266,106.9749984741211)"
          >
            <path
              fill="rgb(255,255,255)"
              fill-opacity="1"
              d=" M37.08000183105469,50.14799880981445 C37.08000183105469,50.14799880981445 -16.606000900268555,-4.48199987411499 -16.606000900268555,-4.48199987411499 C-16.606000900268555,-4.48199987411499 -37.645999908447266,-50.14799880981445 -37.645999908447266,-50.14799880981445 C-37.645999908447266,-50.14799880981445 -37.17499923706055,-50.14799880981445 -37.17499923706055,-50.14799880981445 C-37.17499923706055,-50.14799880981445 16.51099967956543,4.576000213623047 16.51099967956543,4.576000213623047 C16.51099967956543,4.576000213623047 37.645999908447266,50.14799880981445 37.645999908447266,50.14799880981445 C37.645999908447266,50.14799880981445 37.08000183105469,50.14799880981445 37.08000183105469,50.14799880981445z"
            ></path>
            <path
              stroke-linecap="butt"
              stroke-linejoin="miter"
              fill-opacity="0"
              stroke-miterlimit="4"
              stroke="rgb(241,90,34)"
              stroke-opacity="1"
              stroke-width="0.5"
              d=" M37.08000183105469,50.14799880981445 C37.08000183105469,50.14799880981445 -16.606000900268555,-4.48199987411499 -16.606000900268555,-4.48199987411499 C-16.606000900268555,-4.48199987411499 -37.645999908447266,-50.14799880981445 -37.645999908447266,-50.14799880981445 C-37.645999908447266,-50.14799880981445 -37.17499923706055,-50.14799880981445 -37.17499923706055,-50.14799880981445 C-37.17499923706055,-50.14799880981445 16.51099967956543,4.576000213623047 16.51099967956543,4.576000213623047 C16.51099967956543,4.576000213623047 37.645999908447266,50.14799880981445 37.645999908447266,50.14799880981445 C37.645999908447266,50.14799880981445 37.08000183105469,50.14799880981445 37.08000183105469,50.14799880981445z"
            ></path>
          </g>
        </g>
      </g>
        <g
          transform="matrix(0.7071067690849304,0.7071067690849304,-0.7071067690849304,0.7071067690849304,185.3524169921875,243.84893798828125)"
        >
        <g cube style="transform-origin:11% 11%">
          <g transform="matrix(1,0,0,1,70.2249984741211,108.6259994506836)">
            <path
              fill="rgb(255,255,255)"
              fill-opacity="1"
              d=" M63.6879997253418,-5.849999904632568 C63.6879997253418,-5.849999904632568 5.4720001220703125,23.493000030517578 5.4720001220703125,23.493000030517578 C5.4720001220703125,23.493000030517578 -63.6879997253418,5.85099983215332 -63.6879997253418,5.85099983215332 C-63.6879997253418,5.85099983215332 -5.565999984741211,-23.493000030517578 -5.565999984741211,-23.493000030517578 C-5.565999984741211,-23.493000030517578 63.6879997253418,-5.849999904632568 63.6879997253418,-5.849999904632568z"
            ></path>
            <path
              stroke-linecap="butt"
              stroke-linejoin="miter"
              fill-opacity="0"
              stroke-miterlimit="4"
              stroke="rgb(241,90,34)"
              stroke-opacity="1"
              stroke-width="0.5"
              d=" M63.6879997253418,-5.849999904632568 C63.6879997253418,-5.849999904632568 5.4720001220703125,23.493000030517578 5.4720001220703125,23.493000030517578 C5.4720001220703125,23.493000030517578 -63.6879997253418,5.85099983215332 -63.6879997253418,5.85099983215332 C-63.6879997253418,5.85099983215332 -5.565999984741211,-23.493000030517578 -5.565999984741211,-23.493000030517578 C-5.565999984741211,-23.493000030517578 63.6879997253418,-5.849999904632568 63.6879997253418,-5.849999904632568z"
            ></path>
          </g>
          <g
            transform="matrix(1,0,0,1,32.48500061035156,57.25199890136719)"
          >
            <path
              fill="rgb(255,255,255)"
              fill-opacity="1"
              d=" M31.985000610351562,27.315000534057617 C31.985000610351562,27.315000534057617 -26.13599967956543,56.65800094604492 -26.13599967956543,56.65800094604492 C-26.13599967956543,56.65800094604492 -31.985000610351562,-27.219999313354492 -31.985000610351562,-27.219999313354492 C-31.985000610351562,-27.219999313354492 26.229999542236328,-56.65800094604492 26.229999542236328,-56.65800094604492 C26.229999542236328,-56.65800094604492 31.985000610351562,27.315000534057617 31.985000610351562,27.315000534057617z"
            ></path>
            <path
              stroke-linecap="butt"
              stroke-linejoin="miter"
              fill-opacity="0"
              stroke-miterlimit="4"
              stroke="rgb(241,90,34)"
              stroke-opacity="1"
              stroke-width="0.5"
              d=" M31.985000610351562,27.315000534057617 C31.985000610351562,27.315000534057617 -26.13599967956543,56.65800094604492 -26.13599967956543,56.65800094604492 C-26.13599967956543,56.65800094604492 -31.985000610351562,-27.219999313354492 -31.985000610351562,-27.219999313354492 C-31.985000610351562,-27.219999313354492 26.229999542236328,-56.65800094604492 26.229999542236328,-56.65800094604492 C26.229999542236328,-56.65800094604492 31.985000610351562,27.315000534057617 31.985000610351562,27.315000534057617z"
            ></path>
          </g>
          <g
            transform="matrix(1,0,0,1,96.40799713134766,51.35599899291992)"
          >
            <path
              fill="rgb(255,255,255)"
              fill-opacity="1"
              d=" M31.655000686645508,-33.11800003051758 C31.655000686645508,-33.11800003051758 37.505001068115234,50.85499954223633 37.505001068115234,50.85499954223633 C37.505001068115234,50.85499954223633 -31.749000549316406,33.117000579833984 -31.749000549316406,33.117000579833984 C-31.749000549316406,33.117000579833984 -37.505001068115234,-50.85499954223633 -37.505001068115234,-50.85499954223633 C-37.505001068115234,-50.85499954223633 31.655000686645508,-33.11800003051758 31.655000686645508,-33.11800003051758z"
            ></path>
            <path
              stroke-linecap="butt"
              stroke-linejoin="miter"
              fill-opacity="0"
              stroke-miterlimit="4"
              stroke="rgb(241,90,34)"
              stroke-opacity="1"
              stroke-width="0.5"
              d=" M31.655000686645508,-33.11800003051758 C31.655000686645508,-33.11800003051758 37.505001068115234,50.85499954223633 37.505001068115234,50.85499954223633 C37.505001068115234,50.85499954223633 -31.749000549316406,33.117000579833984 -31.749000549316406,33.117000579833984 C-31.749000549316406,33.117000579833984 -37.505001068115234,-50.85499954223633 -37.505001068115234,-50.85499954223633 C-37.505001068115234,-50.85499954223633 31.655000686645508,-33.11800003051758 31.655000686645508,-33.11800003051758z"
            ></path>
          </g>
        </g>
      </g>
        <g
          transform="matrix(0.7071125507354736,0.7071009874343872,-0.7071009874343872,0.7071125507354736,393.9209899902344,34.43798828125)"
        >
        <g cube style="transform-origin:17% 16%">
          <g
            transform="matrix(1,0,0,1,60.790000915527344,138.3000030517578)"
          >
            <path
              fill="rgb(255,255,255)"
              fill-opacity="1"
              d=" M60.29100036621094,75.62200164794922 C60.29100036621094,75.62200164794922 -39.62699890136719,43.35499954223633 -39.62699890136719,43.35499954223633 C-39.62699890136719,43.35499954223633 -60.29100036621094,-75.62200164794922 -60.29100036621094,-75.62200164794922 C-60.29100036621094,-75.62200164794922 39.62699890136719,-43.354000091552734 39.62699890136719,-43.354000091552734 C39.62699890136719,-43.354000091552734 60.29100036621094,75.62200164794922 60.29100036621094,75.62200164794922z"
            ></path>
            <path
              stroke-linecap="butt"
              stroke-linejoin="miter"
              fill-opacity="0"
              stroke-miterlimit="4"
              stroke="rgb(241,90,34)"
              stroke-opacity="1"
              stroke-width="0.5"
              d=" M60.29100036621094,75.62200164794922 C60.29100036621094,75.62200164794922 -39.62699890136719,43.35499954223633 -39.62699890136719,43.35499954223633 C-39.62699890136719,43.35499954223633 -60.29100036621094,-75.62200164794922 -60.29100036621094,-75.62200164794922 C-60.29100036621094,-75.62200164794922 39.62699890136719,-43.354000091552734 39.62699890136719,-43.354000091552734 C39.62699890136719,-43.354000091552734 60.29100036621094,75.62200164794922 60.29100036621094,75.62200164794922z"
            ></path>
          </g>
          <g
            transform="matrix(1,0,0,1,96.69100189208984,47.393001556396484)"
          >
            <path
              fill="rgb(255,255,255)"
              fill-opacity="1"
              d=" M3.821000099182129,46.893001556396484 C3.821000099182129,46.893001556396484 -96.09700012207031,14.625 -96.09700012207031,14.625 C-96.09700012207031,14.625 -3.821000099182129,-46.893001556396484 -3.821000099182129,-46.893001556396484 C-3.821000099182129,-46.893001556396484 96.09700012207031,-14.62399959564209 96.09700012207031,-14.62399959564209 C96.09700012207031,-14.62399959564209 3.821000099182129,46.893001556396484 3.821000099182129,46.893001556396484z"
            ></path>
            <path
              stroke-linecap="butt"
              stroke-linejoin="miter"
              fill-opacity="0"
              stroke-miterlimit="4"
              stroke="rgb(241,90,34)"
              stroke-opacity="1"
              stroke-width="0.5"
              d=" M3.821000099182129,46.893001556396484 C3.821000099182129,46.893001556396484 -96.09700012207031,14.625 -96.09700012207031,14.625 C-96.09700012207031,14.625 -3.821000099182129,-46.893001556396484 -3.821000099182129,-46.893001556396484 C-3.821000099182129,-46.893001556396484 96.09700012207031,-14.62399959564209 96.09700012207031,-14.62399959564209 C96.09700012207031,-14.62399959564209 3.821000099182129,46.893001556396484 3.821000099182129,46.893001556396484z"
            ></path>
          </g>
          <g
            transform="matrix(1,0,0,1,157.31199645996094,123.58100128173828)"
          >
            <path
              fill="rgb(255,255,255)"
              fill-opacity="1"
              d=" M35.7599983215332,-90.24700164794922 C35.7599983215332,-90.24700164794922 56.51599884033203,28.729999542236328 56.51599884033203,28.729999542236328 C56.51599884033203,28.729999542236328 -35.854000091552734,90.24700164794922 -35.854000091552734,90.24700164794922 C-35.854000091552734,90.24700164794922 -56.51599884033203,-28.729999542236328 -56.51599884033203,-28.729999542236328 C-56.51599884033203,-28.729999542236328 35.7599983215332,-90.24700164794922 35.7599983215332,-90.24700164794922z"
            ></path>
            <path
              stroke-linecap="butt"
              stroke-linejoin="miter"
              fill-opacity="0"
              stroke-miterlimit="4"
              stroke="rgb(241,90,34)"
              stroke-opacity="1"
              stroke-width="0.5"
              d=" M35.7599983215332,-90.24700164794922 C35.7599983215332,-90.24700164794922 56.51599884033203,28.729999542236328 56.51599884033203,28.729999542236328 C56.51599884033203,28.729999542236328 -35.854000091552734,90.24700164794922 -35.854000091552734,90.24700164794922 C-35.854000091552734,90.24700164794922 -56.51599884033203,-28.729999542236328 -56.51599884033203,-28.729999542236328 C-56.51599884033203,-28.729999542236328 35.7599983215332,-90.24700164794922 35.7599983215332,-90.24700164794922z"
            ></path>
          </g>
        </g>
      </g>
        <g
          transform="matrix(0.7071100473403931,-0.7071035504341125,0.7071035504341125,0.7071100473403931,130.81459045410156,95.32904052734375)"
        >
        <g cube style="transform-origin:8% 6%">
          <g
            transform="matrix(1,0,0,1,38.99599838256836,66.63999938964844)"
          >
            <path
              fill="rgb(255,255,255)"
              fill-opacity="1"
              d=" M38.494998931884766,5.660999774932861 C38.494998931884766,5.660999774932861 13.11400032043457,9.246999740600586 13.11400032043457,9.246999740600586 C13.11400032043457,9.246999740600586 -38.494998931884766,-5.660999774932861 -38.494998931884766,-5.660999774932861 C-38.494998931884766,-5.660999774932861 -13.114999771118164,-9.246999740600586 -13.114999771118164,-9.246999740600586 C-13.114999771118164,-9.246999740600586 38.494998931884766,5.660999774932861 38.494998931884766,5.660999774932861z"
            ></path>
            <path
              stroke-linecap="butt"
              stroke-linejoin="miter"
              fill-opacity="0"
              stroke-miterlimit="4"
              stroke="rgb(241,90,34)"
              stroke-opacity="1"
              stroke-width="0.5"
              d=" M38.494998931884766,5.660999774932861 C38.494998931884766,5.660999774932861 13.11400032043457,9.246999740600586 13.11400032043457,9.246999740600586 C13.11400032043457,9.246999740600586 -38.494998931884766,-5.660999774932861 -38.494998931884766,-5.660999774932861 C-38.494998931884766,-5.660999774932861 -13.114999771118164,-9.246999740600586 -13.114999771118164,-9.246999740600586 C-13.114999771118164,-9.246999740600586 38.494998931884766,5.660999774932861 38.494998931884766,5.660999774932861z"
            ></path>
          </g>
          <g
            transform="matrix(1,0,0,1,19.18199920654297,30.69300079345703)"
          >
            <path
              fill="rgb(255,255,255)"
              fill-opacity="1"
              d=" M6.698999881744385,26.701000213623047 C6.698999881744385,26.701000213623047 -18.68199920654297,30.19300079345703 -18.68199920654297,30.19300079345703 C-18.68199920654297,30.19300079345703 -6.698999881744385,-26.51300048828125 -6.698999881744385,-26.51300048828125 C-6.698999881744385,-26.51300048828125 18.68199920654297,-30.19300079345703 18.68199920654297,-30.19300079345703 C18.68199920654297,-30.19300079345703 6.698999881744385,26.701000213623047 6.698999881744385,26.701000213623047z"
            ></path>
            <path
              stroke-linecap="butt"
              stroke-linejoin="miter"
              fill-opacity="0"
              stroke-miterlimit="4"
              stroke="rgb(241,90,34)"
              stroke-opacity="1"
              stroke-width="0.5"
              d=" M6.698999881744385,26.701000213623047 C6.698999881744385,26.701000213623047 -18.68199920654297,30.19300079345703 -18.68199920654297,30.19300079345703 C-18.68199920654297,30.19300079345703 -6.698999881744385,-26.51300048828125 -6.698999881744385,-26.51300048828125 C-6.698999881744385,-26.51300048828125 18.68199920654297,-30.19300079345703 18.68199920654297,-30.19300079345703 C18.68199920654297,-30.19300079345703 6.698999881744385,26.701000213623047 6.698999881744385,26.701000213623047z"
            ></path>
          </g>
          <g
            transform="matrix(1,0,0,1,57.819000244140625,36.448001861572266)"
          >
            <path
              fill="rgb(255,255,255)"
              fill-opacity="1"
              d=" M31.75,-20.945999145507812 C31.75,-20.945999145507812 19.767000198364258,35.854000091552734 19.767000198364258,35.854000091552734 C19.767000198364258,35.854000091552734 -31.75,20.945999145507812 -31.75,20.945999145507812 C-31.75,20.945999145507812 -19.767000198364258,-35.854000091552734 -19.767000198364258,-35.854000091552734 C-19.767000198364258,-35.854000091552734 31.75,-20.945999145507812 31.75,-20.945999145507812z"
            ></path>
            <path
              stroke-linecap="butt"
              stroke-linejoin="miter"
              fill-opacity="0"
              stroke-miterlimit="4"
              stroke="rgb(241,90,34)"
              stroke-opacity="1"
              stroke-width="0.5"
              d=" M31.75,-20.945999145507812 C31.75,-20.945999145507812 19.767000198364258,35.854000091552734 19.767000198364258,35.854000091552734 C19.767000198364258,35.854000091552734 -31.75,20.945999145507812 -31.75,20.945999145507812 C-31.75,20.945999145507812 -19.767000198364258,-35.854000091552734 -19.767000198364258,-35.854000091552734 C-19.767000198364258,-35.854000091552734 31.75,-20.945999145507812 31.75,-20.945999145507812z"
            ></path>
          </g>
        </g>
      </g>
        <g
          transform="matrix(0.7071088552474976,0.7071046829223633,-0.7071046829223633,0.7071088552474976,55.312957763671875,139.53822326660156)"
        >
        <g cube style="transform-origin:7% 6%">
          <g
            transform="matrix(1,0,0,1,20.628999710083008,43.04899978637695)"
          >
            <path
              fill="rgb(255,255,255)"
              fill-opacity="1"
              d=" M9.369999885559082,35.042999267578125 C9.369999885559082,35.042999267578125 -20.128000259399414,8.95300006866455 -20.128000259399414,8.95300006866455 C-20.128000259399414,8.95300006866455 -9.369999885559082,-35.042999267578125 -9.369999885559082,-35.042999267578125 C-9.369999885559082,-35.042999267578125 20.128000259399414,-8.95199966430664 20.128000259399414,-8.95199966430664 C20.128000259399414,-8.95199966430664 9.369999885559082,35.042999267578125 9.369999885559082,35.042999267578125z"
            ></path>
            <path
              stroke-linecap="butt"
              stroke-linejoin="miter"
              fill-opacity="0"
              stroke-miterlimit="4"
              stroke="rgb(241,90,34)"
              stroke-opacity="1"
              stroke-width="0.5"
              d=" M9.369999885559082,35.042999267578125 C9.369999885559082,35.042999267578125 -20.128000259399414,8.95300006866455 -20.128000259399414,8.95300006866455 C-20.128000259399414,8.95300006866455 -9.369999885559082,-35.042999267578125 -9.369999885559082,-35.042999267578125 C-9.369999885559082,-35.042999267578125 20.128000259399414,-8.95199966430664 20.128000259399414,-8.95199966430664 C20.128000259399414,-8.95199966430664 9.369999885559082,35.042999267578125 9.369999885559082,35.042999267578125z"
            ></path>
          </g>
          <g
            transform="matrix(1,0,0,1,46.6150016784668,17.191999435424805)"
          >
            <path
              fill="rgb(255,255,255)"
              fill-opacity="1"
              d=" M-5.72599983215332,16.69099998474121 C-5.72599983215332,16.69099998474121 -35.224998474121094,-9.39900016784668 -35.224998474121094,-9.39900016784668 C-35.224998474121094,-9.39900016784668 5.72599983215332,-16.69099998474121 5.72599983215332,-16.69099998474121 C5.72599983215332,-16.69099998474121 35.224998474121094,9.399999618530273 35.224998474121094,9.399999618530273 C35.224998474121094,9.399999618530273 -5.72599983215332,16.69099998474121 -5.72599983215332,16.69099998474121z"
            ></path>
            <path
              stroke-linecap="butt"
              stroke-linejoin="miter"
              fill-opacity="0"
              stroke-miterlimit="4"
              stroke="rgb(241,90,34)"
              stroke-opacity="1"
              stroke-width="0.5"
              d=" M-5.72599983215332,16.69099998474121 C-5.72599983215332,16.69099998474121 -35.224998474121094,-9.39900016784668 -35.224998474121094,-9.39900016784668 C-35.224998474121094,-9.39900016784668 5.72599983215332,-16.69099998474121 5.72599983215332,-16.69099998474121 C5.72599983215332,-16.69099998474121 35.224998474121094,9.399999618530273 35.224998474121094,9.399999618530273 C35.224998474121094,9.399999618530273 -5.72599983215332,16.69099998474121 -5.72599983215332,16.69099998474121z"
            ></path>
          </g>
          <g
            transform="matrix(1,0,0,1,55.99800109863281,52.47200012207031)"
          >
            <path
              fill="rgb(255,255,255)"
              fill-opacity="1"
              d=" M25.854999542236328,-25.643999099731445 C25.854999542236328,-25.643999099731445 15.128999710083008,18.365999221801758 15.128999710083008,18.365999221801758 C15.128999710083008,18.365999221801758 -25.854999542236328,25.643999099731445 -25.854999542236328,25.643999099731445 C-25.854999542236328,25.643999099731445 -15.095999717712402,-18.351999282836914 -15.095999717712402,-18.351999282836914 C-15.095999717712402,-18.351999282836914 25.854999542236328,-25.643999099731445 25.854999542236328,-25.643999099731445z"
            ></path>
            <path
              stroke-linecap="butt"
              stroke-linejoin="miter"
              fill-opacity="0"
              stroke-miterlimit="4"
              stroke="rgb(241,90,34)"
              stroke-opacity="1"
              stroke-width="0.5"
              d=" M25.854999542236328,-25.643999099731445 C25.854999542236328,-25.643999099731445 15.128999710083008,18.365999221801758 15.128999710083008,18.365999221801758 C15.128999710083008,18.365999221801758 -25.854999542236328,25.643999099731445 -25.854999542236328,25.643999099731445 C-25.854999542236328,25.643999099731445 -15.095999717712402,-18.351999282836914 -15.095999717712402,-18.351999282836914 C-15.095999717712402,-18.351999282836914 25.854999542236328,-25.643999099731445 25.854999542236328,-25.643999099731445z"
            ></path>
          </g>
        </g>
      </g>
    </g>
  </svg>`,
};
